<template>
  <div ref="codeEditBox"
    class="codeEditBox"></div>
</template>
<script setup lang="ts" name="MonacoEditor">
import {
	onBeforeUnmount, onMounted, reactive, ref, watch, toRaw
} from 'vue'
import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import * as monaco from 'monaco-editor'
import { language as sqlLanguage } from 'monaco-editor/esm/vs/basic-languages/sql/sql.js';
import { language as yamlLanguage } from 'monaco-editor/esm/vs/basic-languages/yaml/yaml.js';
import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution'
const props = defineProps({
	options: {
		type: Object,
		default() {
			return {};
		}
	},
	modelValue: {
		type: String,
		required: false,
		default: '',
	},
	language: {
		type: String,
		default: 'sql',
	},
	readOnly: {
		type: Boolean,
	},
	theme: {
		type: String,
	},
	hints: {
		type: Array,
		default() {
			return [];
		}
	}
})
const codeEditBox = ref()
// 定义子组件向父组件传值/事件
const emit = defineEmits(['update:modelValue', 'change', 'onblur', 'onclear', 'onfocus', 'editor-mounted', 'save', 'input']);

const state = reactive({
	editor: {} as monaco.editor.IStandaloneCodeEditor,
	defaultOptions: {
		theme: "vs-dark",
		fontSize: 14
	}
})
const init = () => {
	(self as any).MonacoEnvironment = {
		getWorker(_: string, label: string) {
			if (label === 'json') {
				return new JsonWorker()
			}
			if (['css', 'scss', 'less'].includes(label)) {
				return new CssWorker()
			}
			if (['html', 'handlebars', 'razor'].includes(label)) {
				return new HtmlWorker()
			}
			if (['typescript', 'javascript'].includes(label)) {
				return new TsWorker()
			}
			return new EditorWorker()
		},
	}
	monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
		noSemanticValidation: true,
		noSyntaxValidation: false,
	})
	monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
		target: monaco.languages.typescript.ScriptTarget.ES2020,
		allowNonTsExtensions: true,
	})
	monaco.languages.registerCompletionItemProvider('sql', {
		provideCompletionItems() {
			const suggestions:any = [];
			// 这个keywords就是sql.js文件中有的
			sqlLanguage.keywords.forEach((item:any) => {
				suggestions.push({
					label: item,
					kind: monaco.languages.CompletionItemKind.Keyword,
					insertText: item,
				});
			})
			sqlLanguage.operators.forEach((item:any) => {
				suggestions.push({
					label: item,
					kind: monaco.languages.CompletionItemKind.Operator,
					insertText: item,
				});
			})
			sqlLanguage.builtinFunctions.forEach((item:any) => {
				suggestions.push({
					label: item,
					kind: monaco.languages.CompletionItemKind.Function,
					insertText: item,
				});
			})
			sqlLanguage.builtinVariables.forEach((item:any) => {
				suggestions.push({
					label: item,
					kind: monaco.languages.CompletionItemKind.Variable,
					insertText: item,
				});
			})
			return {
				// 最后要返回一个数组
				suggestions,
			};
		},
	})
	monaco.languages.registerCompletionItemProvider('yaml', {
		provideCompletionItems() {
			const suggestions:any = [];
			// 这个keywords就是python.js文件中有的
			yamlLanguage.keywords.forEach((item:any) => {
				suggestions.push({
					label: item,
					kind: monaco.languages.CompletionItemKind.Keyword,
					insertText: item,
				});
			})
			return {
				// 最后要返回一个数组
				suggestions,
			};
		},
	})

	state.editor = monaco.editor.create(codeEditBox.value, {
		value: props.modelValue,
		language: props.language,
		readOnly: props.readOnly,
		theme: props.theme,
		...props.options,
	})

	// 监听值的变化
	state.editor.onDidChangeModelContent(() => {
		const value = toRaw(state.editor).getValue() // 给父组件实时返回最新文本
		emit('update:modelValue', value)
		emit('change', value)
	})

	emit('editor-mounted', state.editor)
}
watch( () => props.modelValue, (newValue) => {
	if (state.editor) {
		const value = toRaw(state.editor).getValue()
		if (newValue !== value) {
			toRaw(state.editor).setValue(newValue)
		}
	}
})
watch(() => props.options, (newValue) => {
		state.editor.updateOptions(newValue)
	},
	{ deep: true },
)
watch(() => props.readOnly, () => {
		console.log('props.readOnly', props.readOnly)
		state.editor.updateOptions({ readOnly: props.readOnly })
	},
	{ deep: true },
)
watch(() => props.language, (newValue) => {
		monaco.editor.setModelLanguage(state.editor.getModel()!, newValue)
	},
)
onBeforeUnmount(() => {
	state.editor.dispose()
})
 
onMounted(() => {
	init()
})
</script>

<style scoped>
.codeEditBox {
	width: 100%;
	flex: 1;
	height: 300px;
	min-height: 100px;
}
.codeEditBox1{
	height: calc(100% - 323px);
}
</style>